<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>第四章 探花交友 - 项目接口文档 | 谦谦君子</title>
  <meta name="keywords" content=" 探花交友 , 项目 ">
  <meta name="description" content="第四章 探花交友 - 项目接口文档 | 谦谦君子">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta property="og:type" content="website">
<meta property="og:title" content="about">
<meta property="og:url" content="https://zhanligui.gitee.io/about/index.html">
<meta property="og:site_name" content="谦谦君子">
<meta property="og:description" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-10-21T09:27:05.000Z">
<meta property="article:modified_time" content="2021-12-06T06:50:36.883Z">
<meta property="article:author" content="谦谦君子">
<meta property="article:tag" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.1.0" rel="stylesheet">

<link href="/css/hl_theme/atom-light.css?v=1.1.0" rel="stylesheet">

<link href="//cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" rel="stylesheet">

<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/js/titleTip.js?v=1.1.0" ></script>

<script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>



<script src="//cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js" ></script>

<script src="/js/iconfont.js?v=1.1.0" ></script>

<meta name="generator" content="Hexo 5.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="">
  <input class="theme_blog_path" value="">
  <input id="theme_shortcut" value="true" />
  <input id="theme_highlight_on" value="true" />
  <input id="theme_code_copy" value="true" />
</div>



<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/"
   class="avatar_target">
    <img class="avatar"
         src="/img/avatar.jpg"/>
</a>
<div class="author">
    <span>谦谦君子</span>
</div>

<div class="icon">
    
        
            <a title="rss"
               href="/atom.xml"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-rss"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="github"
               href="https://github.com/yelog"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="facebook"
               href="https://www.facebook.com/faker.tops"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-facebook"></use>
                    </svg>
                
            </a>
        
    
        
    
        
    
        
            <a title="instagram"
               href="https://www.facebook.com/faker.tops"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-instagram"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="reddit"
               href="https://www.reddit.com/user/yelog/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-reddit"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="weibo"
               href="http://weibo.com/u/2307534817"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="jianshu"
               href="https://www.jianshu.com/u/ff56736de7cf"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-jianshu"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="zhihu"
               href="https://www.zhihu.com/people/jaytp/activities"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-zhihu"></use>
                    </svg>
                
            </a>
        
    
        
    
        
            <a title="oschina"
               href="https://my.oschina.net/yelog"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-oschina"></use>
                    </svg>
                
            </a>
        
    
        
    
        
            <a title="email"
               href="mailto:jaytp@qq.com"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-email"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="qq"
               href="http://wpa.qq.com/msgrd?v=3&uin=872336115&site=qq&menu=yes"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="kugou"
               href="https://www.kugou.com/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-kugou"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="neteasemusic"
               href="https://music.163.com/#/user/home?id=88151013"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-neteasemusic"></use>
                    </svg>
                
            </a>
        
    
</div>




<ul>
    <li>
        <div class="all active" data-rel="全部文章">全部文章
            
                <small>(16)</small>
            
        </div>
    </li>
    
        
            
                <li>
                    <div data-rel="技巧">
                        
                        技巧
                        <small>(2)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="面试">
                        
                        面试
                        <small>(3)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="日记">
                        
                        日记
                        <small>(1)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="项目文档">
                        
                        项目文档
                        <small>(6)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="hexo">
                        
                        hexo
                        <small>(2)</small>
                        
                    </div>
                    
                </li>
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
        
            
            
            
    </div>
    <div>
        
            <a class="about  hasFriend  site_url"
               
               href="/about">关于</a>
        
        <a style="width: 50%"
                
                                           class="friends">友链</a>
        
    </div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="16">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="iconfont icon-left"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <div class="right-top">
        <div id="default-panel">
            <i class="iconfont icon-search" data-title="搜索 快捷键 i"></i>
            <div class="right-title">全部文章</div>
            <i class="iconfont icon-file-tree" data-title="切换到大纲视图 快捷键 w"></i>
        </div>
        <div id="search-panel">
            <i class="iconfont icon-left" data-title="返回"></i>
            <input id="local-search-input" autocomplete="off"/>
            <label class="border-line" for="input"></label>
            <i class="iconfont icon-case-sensitive" data-title="大小写敏感"></i>
            <i class="iconfont icon-tag" data-title="标签"></i>
        </div>
        <div id="outline-panel" style="display: none">
            <div class="right-title">大纲</div>
            <i class="iconfont icon-list" data-title="切换到文章列表"></i>
        </div>
    </div>

    <div class="tags-list">
    <input id="tag-search" />
    <div class="tag-wrapper">
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>技巧</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>面试</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>前端</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>日记</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>探花交友</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>项目</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>hexo</a>
            </li>
        
    </div>

</div>

    
    <nav id="title-list-nav">
        
        <a  class="全部文章 "
           href="/posts/55136.html"
           data-tag=""
           data-author="" >
            <span class="post-title" title="vue3">vue3</span>
            <span class="post-date" title="2021-12-07 10:07:53">2021/12/07</span>
        </a>
        
        <a  class="全部文章 "
           href="/posts/16107.html"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Hello World">Hello World</span>
            <span class="post-date" title="2021-12-06 14:50:36">2021/12/06</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10003.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第三章 React-native - 基础">第三章 React-native - 基础</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10002.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第二章 探花交友 - 环境搭建">第二章 探花交友 - 环境搭建</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10001.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第一章 探花交友 - Android   课程安排">第一章 探花交友 - Android   课程安排</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10000.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="探花交友-概述">探花交友-概述</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10005.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="探花交友-插件">探花交友-插件</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10004.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第四章 探花交友 - 项目接口文档">第四章 探花交友 - 项目接口文档</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 hexo "
           href="/posts/49579.html"
           data-tag="hexo"
           data-author="" >
            <span class="post-title" title="Hexo 加入字数统计 WordCount">Hexo 加入字数统计 WordCount</span>
            <span class="post-date" title="2020-11-04 17:20:29">2020/11/04</span>
        </a>
        
        <a  class="全部文章 hexo "
           href="/posts/21358.html"
           data-tag="hexo"
           data-author="" >
            <span class="post-title" title="生成永久链接(permalink) | hexo">生成永久链接(permalink) | hexo</span>
            <span class="post-date" title="2020-11-04 17:20:29">2020/11/04</span>
        </a>
        
        <a  class="全部文章 技巧 "
           href="/posts/60475.html"
           data-tag="技巧"
           data-author="" >
            <span class="post-title" title="思否免登陆复制方法">思否免登陆复制方法</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 技巧 "
           href="/posts/64216.html"
           data-tag="技巧"
           data-author="" >
            <span class="post-title" title="网页可随意编辑">网页可随意编辑</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/7266.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="数组拷贝的方法">数组拷贝的方法</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/53209.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="网络协议">网络协议</span>
            <span class="post-date" title="2020-11-02 11:08:31">2020/11/02</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/43383.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="强缓存和协商缓存">强缓存和协商缓存</span>
            <span class="post-date" title="2020-10-30 14:26:59">2020/10/30</span>
        </a>
        
        <a  class="全部文章 日记 "
           href="/posts/58040.html"
           data-tag="日记"
           data-author="" >
            <span class="post-title" title="今日来了一只不速之客">今日来了一只不速之客</span>
            <span class="post-date" title="2020-10-23 17:39:09">2020/10/23</span>
        </a>
        
        <div id="no-item-tips">

        </div>
    </nav>
    <div id="outline-list">
    </div>
</div>

    </div>
    <div class="hide-list">
        <div class="semicircle" data-title="切换全屏 快捷键 s">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div id="post">
    <div class="pjax">
        <article id="post-探花交友/project" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">第四章 探花交友 - 项目接口文档</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            <i class="iconfont icon-category"></i>
            
            
            <a  data-rel="项目文档">项目文档</a>
            
        </span>
        
        
        <span class="tag">
            <i class="iconfont icon-tag"></i>
            
            <a class="color5">探花交友</a>
            
            <a class="color3">项目</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
            发布时间 : <time class="date" title='最后更新: 2021-12-06 14:50:36'>2020-11-11 11:11</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读 :<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8E%A2%E8%8A%B1%E4%BA%A4%E5%8F%8B-%E9%A1%B9%E7%9B%AE"><span class="toc-text">探花交友 - 项目</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D"><span class="toc-text">模块介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A1%86%E6%9E%B6%E6%90%AD%E5%BB%BA"><span class="toc-text">框架搭建</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3"><span class="toc-text">接口文档</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2"><span class="toc-text">登录页面</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A1%AB%E5%86%99%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81"><span class="toc-text">填写手机号码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4"><span class="toc-text">实现步骤</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A1%AB%E5%86%99%E9%AA%8C%E8%AF%81%E7%A0%81"><span class="toc-text">填写验证码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4-1"><span class="toc-text">实现步骤</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%8C%E5%96%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E9%A1%B5%E9%9D%A2"><span class="toc-text">完善个人信息页面</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%A1%E6%A0%B8%E4%B8%AD%E7%9A%84%E5%8A%A8%E6%80%81%E6%95%88%E6%9E%9C"><span class="toc-text">审核中的动态效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4-2"><span class="toc-text">实现步骤</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#tabbar%E7%BB%93%E6%9E%84"><span class="toc-text">tabbar结构</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4-3"><span class="toc-text">实现步骤</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%8C%E5%96%84%E5%92%8C%E4%BC%98%E5%8C%96%E5%B7%B2%E6%9C%89%E6%9D%83%E9%99%90%E5%92%8Ctoken%E4%B8%9A%E5%8A%A1"><span class="toc-text">完善和优化已有权限和token业务</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%A4%E5%8F%8B-%E9%A6%96%E9%A1%B5"><span class="toc-text">交友-首页</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4-4"><span class="toc-text">实现步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%95%B0%E6%8D%AE%E5%92%8C%E7%AD%9B%E9%80%89%E5%8A%9F%E8%83%BD"><span class="toc-text">列表数据和筛选功能</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8E%A2%E8%8A%B1%E9%A1%B5%E9%9D%A2"><span class="toc-text">探花页面</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%9C%E9%99%84%E8%BF%91"><span class="toc-text">搜附近</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-1"><span class="toc-text">业务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%82%B9%E5%87%BB%E7%AD%9B%E9%80%89"><span class="toc-text">点击筛选</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B5%8B%E7%81%B5%E9%AD%82"><span class="toc-text">测灵魂</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-2"><span class="toc-text">业务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%A7%8B%E7%AD%94%E5%8D%B7"><span class="toc-text">开始答卷</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-3"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8B%E8%AF%95%E7%BB%93%E6%9E%9C"><span class="toc-text">测试结果</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-4"><span class="toc-text">业务</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E8%AF%A6%E6%83%85"><span class="toc-text">用户详情</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-5"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%81%8A%E5%A4%A9%E7%95%8C%E9%9D%A2"><span class="toc-text">聊天界面</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-6"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9C%88%E5%AD%90-%E9%A6%96%E9%A1%B5"><span class="toc-text">圈子-首页</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-7"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9C%88%E5%AD%90-%E6%8E%A8%E8%8D%90"><span class="toc-text">圈子-推荐</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-8"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AF%84%E8%AE%BA%E5%88%97%E8%A1%A8"><span class="toc-text">评论列表</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-9"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%91%E5%B8%83%E5%8A%A8%E6%80%81"><span class="toc-text">发布动态</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-10"><span class="toc-text">业务</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BE%93%E5%85%A5%E8%A1%A8%E6%83%85%E5%8A%9F%E8%83%BD"><span class="toc-text">输入表情功能</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9C%88%E5%AD%90-%E6%9C%80%E6%96%B0"><span class="toc-text">圈子-最新</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B6%88%E6%81%AF-%E9%A6%96%E9%A1%B5"><span class="toc-text">消息-首页</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%88%91%E7%9A%84-%E9%A6%96%E9%A1%B5"><span class="toc-text">我的-首页</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%92%E7%9B%B8%E5%85%B3%E6%B3%A8-%E5%96%9C%E6%AC%A2-%E7%B2%89%E4%B8%9D"><span class="toc-text">互相关注-喜欢-粉丝</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%88%91%E7%9A%84%E5%8A%A8%E6%80%81"><span class="toc-text">我的动态</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-11"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%B0%81%E7%9C%8B%E8%BF%87%E6%88%91"><span class="toc-text">谁看过我</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-12"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF"><span class="toc-text">修改个人信息</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-13"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E8%AE%BE%E7%BD%AE"><span class="toc-text">通用设置</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%9A%E5%8A%A1-14"><span class="toc-text">业务</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-text"></span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="探花交友-项目"><a href="#探花交友-项目" class="headerlink" title="探花交友 - 项目"></a>探花交友 - 项目</h1><p><img src="/friend/tulips-3339416__340.jpg" alt="pink flowers"></p>
<h2 id="模块介绍"><a href="#模块介绍" class="headerlink" title="模块介绍"></a>模块介绍</h2><ul>
<li>交友</li>
<li>圈子</li>
<li>消息</li>
<li>个人中心</li>
<li>其他</li>
</ul>
<h2 id="框架搭建"><a href="#框架搭建" class="headerlink" title="框架搭建"></a>框架搭建</h2><ol>
<li><p>创建项目</p>
<pre><code class="js">npx react-native init tanhuajiaoyou</code></pre>
</li>
<li><p>使用 <a target="_blank" rel="noopener" href="https://reactnavigation.org/">react-navigation</a> 搭建页面路由</p>
</li>
<li><p>新建登录页面</p>
</li>
</ol>
<h1 id="接口文档"><a href="#接口文档" class="headerlink" title="接口文档"></a><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html">接口文档</a></h1><pre><code class="js">http://157.122.54.189:9089/swagger.html</code></pre>
<h1 id="登录页面"><a href="#登录页面" class="headerlink" title="登录页面"></a>登录页面</h1><h2 id="填写手机号码"><a href="#填写手机号码" class="headerlink" title="填写手机号码"></a>填写手机号码</h2><img src="/friend/01-登录1-1591233326384.png" alt="01-登录1" style="zoom:55%;" />





<h3 id="实现步骤"><a href="#实现步骤" class="headerlink" title="实现步骤"></a>实现步骤</h3><ol>
<li><p>完成静态页面布局</p>
<ol>
<li>用到的组件有<ol>
<li>StatusBar</li>
<li>Image</li>
<li>Input(<a href="">react-native-elements</a>)</li>
<li>Icon(<a href="">react-native-vector-icons/FontAwesome5</a>)</li>
<li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-linear-gradient">react-native-linear-gradient</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/rilyu/teaset/blob/HEAD/docs/cn/README.md">Teaset</a></li>
</ol>
</li>
</ol>
</li>
<li><p>实现功能</p>
<ol>
<li><p><code>px</code>单位转<code>dp</code>单位</p>
</li>
<li><p>填写手机号码</p>
</li>
<li><p>校验手机号码</p>
<pre><code class="js">export default &#123;
  validatePhone(phone) &#123;
    const reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]&#123;8&#125;$/;
    return reg.test(phone)
  &#125;
&#125;</code></pre>
</li>
<li><p>获取验证码</p>
</li>
<li><p>切换到 验证码页面</p>
</li>
</ol>
</li>
<li><p>其他</p>
<ol>
<li><p><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html">接口地址</a></p>
<pre><code>http://157.122.54.189:9089/swagger.html</code></pre>
</li>
<li><p>接口路径映射</p>
<pre><code class="js">
/**
 * 接口基地址
 */
export const BASE_URI = &quot;http://157.122.54.189:9089&quot;;

/**
 *  登录 获取验证码  
 */
export const ACCOUNT_LOGIN = &#39;/user/login&#39;;// 登录  
/**
 *  新用户信息注册
 */
export const ACCOUNT_REGINFO = &#39;/user/loginReginfo&#39;; // 新用户信息注册
/**
 *  检查验证码
 */
export const ACCOUNT_VALIDATEVCODE = &#39;/user/loginVerification&#39;;// 检查验证码
/**
 * 审核头像
 */
export const ACCOUNT_CHECKHEADIMAGE = &#39;/user/loginReginfo/head&#39;;  //审核头像
/**
 * 审核头像
 */
export const USER_INFO = &#39;/my/userinfo&#39;;  //审核头像

</code></pre>
</li>
</ol>
</li>
</ol>
<pre><code>  /**
   * 最近来访
   */
  export const FRIENDS_VISITORS = &#39;/friends/visitors&#39;; // 最近来访
  /**
   * 最近来访
   */
  export const FRIENDS_TODAYBEST = &#39;/friends/todayBest&#39;; // 最近来访
  /**
   * 推荐朋友 
   */
  export const FRIENDS_RECOMMEND = &#39;/friends/recommendation&#39;; // 推荐朋友 
  /**
   * 探花-左滑右滑-数据 
   */
  export const FRIENDS_CARDS = &#39;/friends/cards&#39;; // 探花-左滑右滑-数据 
  /**
   * 探花-喜欢和不喜欢 
   */
  export const FRIENDS_LIKE = &#39;/friends/like/:id/:type&#39;; // 探花-喜欢和不喜欢 
  /**
   * 搜附近
   */
  export const FRIENDS_SEARCH = &#39;/friends/search&#39;; // 搜附近
  /**
   * 测灵魂-问卷列表
   */
  export const FRIENDS_QUESTIONS = &#39;/friends/questions&#39;; // 测灵魂-问卷列表
  /**
   * 测灵魂 测试题
   */
  export const FRIENDS_QUESTIONSECTION = &#39;/friends/questionSection/:id&#39;// 测灵魂 测试题
  /**
   * 测灵魂-提交问卷获得鉴定单信息
   */
  export const FRIENDS_QUESTIONANS = &#39;/friends/questionsAns/:id&#39;;// 测灵魂-提交问卷获得鉴定单信息
  /**
   * 朋友信息（点击朋友进入）;
   */
  export const FRIENDS_PERSONALINFO = &#39;/friends/personalInfo/:id&#39;; // 朋友信息（点击朋友进入）;


  // 圈子接口(QZ)
  /**
   *  推荐动态
   */
  export const QZ_TJDT = &#39;/qz/recommend&#39;;   // 推荐动态
  /**
   *  最新动态
   */
  export const QZ_ZXDT = &#39;/qz/newtrends&#39;;   // 最新动态
  /**
   * 单条动态评论
   */
  export const QZ_DT_PL = &#39;/qz/comment/:id&#39;; //单条动态评论
  /**
   *  动态-点赞&amp;取消点赞
   */
  export const QZ_DT_DZ = &#39;/qz/star/:id&#39;; // 动态-点赞&amp;取消点赞
  /**
   *  动态-喜欢&amp;取消喜欢
   */
  export const QZ_DT_XH = &#39;/qz/like/:id&#39;; // 动态-喜欢&amp;取消喜欢
  /**
   *  动态-不感兴趣
   */
  export const QZ_DT_BGXQ = &#39;/qz/noInterest/:id&#39;; // 动态-不感兴趣
  /**
   * 评论-点赞
   */
  export const QZ_DT_PL_DZ = &#39;/qz/comments/star/:id&#39;; //评论-点赞
  /**
   * 评论-提交
   */
  export const QZ_DT_PL_TJ = &#39;/qz/comments/submit/:id&#39;; //评论-提交
  /**
   * 动态-图片-上传
   */
  export const QZ_IMG_UPLOAD = &#39;/qz/trends/image/upload&#39;;  //动态-图片-上传
  /**
   *   动态发布
   */
  export const QZ_DT_PUBLISH = &#39;/qz/trend/submit&#39;; //  动态发布

  /**
   * 我的信息
   */
  export const MY_INFO = &#39;/my/userinfo&#39;; //我的信息

  /**
   * 我的动态
   */
  export const MY_TRENDS = &#39;/my/trends&#39;;
  /**
   * 互相喜欢，喜欢，粉丝 - 统计
   */
  export const MY_COUNTS = &#39;/my/counts&#39;;
  /**
   * 个人信息保存
   */
  export const MY_SUBMITUSERINFO = &#39;/my/submitUserInfo&#39;;
  /**
   * 喜欢列表数据接口
   */
  export const MY_LIKELIST = &#39;/my/likelist&#39;; 
  ```</code></pre>
<h2 id="填写验证码"><a href="#填写验证码" class="headerlink" title="填写验证码"></a>填写验证码</h2><img src="/friend/02-登录2-1591235469477.png" alt="02-登录2" style="zoom:50%;" />



<h3 id="实现步骤-1"><a href="#实现步骤-1" class="headerlink" title="实现步骤"></a>实现步骤</h3><ol>
<li>实现验证码静态页面<ol>
<li>用到的组件有<ol>
<li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-confirmation-code-field">react-native-confirmation-code-field</a></li>
</ol>
</li>
</ol>
</li>
<li>实现功能<ol>
<li>获取验证码</li>
<li>校验验证码</li>
<li>跳转到完善信息页面</li>
<li>跳转到交友页面</li>
</ol>
</li>
</ol>
<h1 id="完善个人信息页面"><a href="#完善个人信息页面" class="headerlink" title="完善个人信息页面"></a>完善个人信息页面</h1><img src="/friend/image-20200607161353070.png" alt="image-20200607161353070" style="zoom:67%;" />



<h2 id="审核中的动态效果"><a href="#审核中的动态效果" class="headerlink" title="审核中的动态效果"></a>审核中的动态效果</h2><img src="/friend/scan.gif" alt="scan" style="zoom:50%;" />



<h2 id="实现步骤-2"><a href="#实现步骤-2" class="headerlink" title="实现步骤"></a>实现步骤</h2><ol>
<li><p>完成静态页面</p>
<ol>
<li>用到的组件有<ol>
<li>react-native-svg-uri</li>
<li>react-native-datepicker</li>
<li>react-native-picker</li>
<li>react-native-image-crop-picker</li>
<li>teaset 的 overlay</li>
</ol>
</li>
</ol>
</li>
<li><p>完成功能</p>
<ol>
<li><p>选择性别 </p>
</li>
<li><p>填写昵称</p>
</li>
<li><p>选择生日</p>
</li>
<li><p>自动定位和手动选择定位</p>
</li>
<li><p>设置头像</p>
<ol>
<li><p>上传头像的接口地址和参数说明</p>
<pre><code class="js">ACCOUNT_CHECKHEADIMAGE // 接口地址</code></pre>
</li>
<li><p>参数说明</p>
<ol>
<li>需要使用formdata对象来传递图片 </li>
<li>key为 “headPhoto”</li>
<li>value 值为对象 <code>&#123;uri,type,name&#125;</code></li>
</ol>
</li>
<li><p>请求头设置</p>
<ol>
<li>需要设置 <code>&quot;Content-Type&quot;: &quot;multipart/form-data&quot;</code></li>
<li>需要携带token <code>Authorization: Bearer...</code></li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li><p>其他</p>
<ol>
<li><p>mobx 来共享数据 如 手机号码 , token  和 用户 id</p>
</li>
<li><p>使用 高德地图来实现 获取定位</p>
</li>
<li><p>封装 request 实现自动携带 token</p>
</li>
<li><p>注册 极光用户</p>
</li>
</ol>
</li>
</ol>
<h1 id="tabbar结构"><a href="#tabbar结构" class="headerlink" title="tabbar结构"></a>tabbar结构</h1><img src="/friend/06-交友.png" alt="06-交友" style="zoom:50%;" />

<h2 id="实现步骤-3"><a href="#实现步骤-3" class="headerlink" title="实现步骤"></a>实现步骤</h2><ol>
<li>分析<ol>
<li>tabbar结构上,存放着四个页面(模块),分别是  <strong>交友,圈子,消息,我的</strong></li>
</ol>
</li>
<li>用到的组件<ol>
<li>react-native-tab-navigator </li>
<li>react-native-svg-uri</li>
</ol>
</li>
</ol>
<h1 id="完善和优化已有权限和token业务"><a href="#完善和优化已有权限和token业务" class="headerlink" title="完善和优化已有权限和token业务"></a>完善和优化已有权限和token业务</h1><ol>
<li>在 <code>成功登录</code> 后<ol>
<li>将用户信息存储到 mobx中</li>
<li>将用户信息存储到 本地缓存中  <code>AsyncStorage</code></li>
</ol>
</li>
<li>在 <code>nav</code> 页面  对用户做权限校验</li>
<li>在 <code>App</code> 中 将 本地存储中的用户数据 赋值到 mobx 中</li>
<li>在 <code>tabbar</code>页面进行极光登录</li>
</ol>
<h1 id="交友-首页"><a href="#交友-首页" class="headerlink" title="交友-首页"></a>交友-首页</h1><img src="/friend/06-交友-1591781246221.png" alt="06-交友" style="zoom:50%;" />



<h2 id="实现步骤-4"><a href="#实现步骤-4" class="headerlink" title="实现步骤"></a>实现步骤</h2><ol>
<li><p>功能点</p>
<ol>
<li>静态布局</li>
<li>顶部图片吸顶效果 <code>react-native-image-header-scroll-view</code></li>
<li>访客模块</li>
<li>今日佳人模块</li>
<li>rn中使用普通的iconfont字体</li>
<li>筛选功能</li>
<li>推荐列表</li>
</ol>
</li>
</ol>
<h2 id="列表数据和筛选功能"><a href="#列表数据和筛选功能" class="headerlink" title="列表数据和筛选功能"></a>列表数据和筛选功能</h2><img src="/friend/07-交友-筛选.png" alt="07-交友-筛选" style="zoom:50%;" />

<hr>
<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_recommendation">用到的接口</a> </li>
<li>业务<ol>
<li>获取数据渲染推荐列表</li>
<li>点击 <code>筛选</code> 时  , 使用 teaset的弹出层实现 筛选界面的弹出</li>
<li>根据需求构造 <code>筛选界面</code>的组件功能</li>
<li>点击 <code>确认</code> 时 将筛选的结果返回到父页面,继而加载新的数据</li>
</ol>
</li>
</ol>
<h1 id="探花页面"><a href="#探花页面" class="headerlink" title="探花页面"></a>探花页面</h1><blockquote>
<p>左滑右滑来切换 用户</p>
</blockquote>
<img src="/friend/image-20200613145433714.png" alt="image-20200613145433714" style="zoom:50%;" />

<h2 id="业务"><a href="#业务" class="headerlink" title="业务"></a>业务</h2><ol>
<li><p>封装顶部tabbar</p>
</li>
<li><p>加载数据实现渲染用户</p>
</li>
<li><p>使用组件实现左滑右滑实现对用户的喜欢和不喜欢</p>
</li>
<li><p>点击不同的按钮实现 对用户的喜欢和不喜欢</p>
</li>
<li><p>用到的接口</p>
<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_cards">获取需要滑动的数据</a></li>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_like__id___type_">喜欢和不喜欢</a></li>
</ol>
</li>
<li><p>用到的组件</p>
<ol>
<li>react-native-deck-swiper</li>
</ol>
</li>
</ol>
<h1 id="搜附近"><a href="#搜附近" class="headerlink" title="搜附近"></a>搜附近</h1><img src="/friend/10-搜附近.png" alt="10-搜附近" style="zoom:50%;" />

<h2 id="业务-1"><a href="#业务-1" class="headerlink" title="业务"></a>业务</h2><ol>
<li>实现静态布局</li>
<li>获取附近好友 和 动态渲染附近好友</li>
<li>点击筛选按钮 进行筛选数据</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_search">搜索附近</a></li>
</ol>
</li>
</ol>
<h2 id="点击筛选"><a href="#点击筛选" class="headerlink" title="点击筛选"></a>点击筛选</h2><img src="/friend/11-搜附近-筛选.png" alt="11-搜附近-筛选" style="zoom: 50%;" />





<h1 id="测灵魂"><a href="#测灵魂" class="headerlink" title="测灵魂"></a>测灵魂</h1><img src="/friend/12-测灵魂-初级.png" alt="12-测灵魂-初级" style="zoom:75%;" />

<h2 id="业务-2"><a href="#业务-2" class="headerlink" title="业务"></a>业务</h2><ol>
<li>实现静态布局</li>
<li>滑动效果也是使用之前的swiper组件来实现的</li>
<li>点击开始测试后 会跳转到下一页 <strong>测试题页面</strong></li>
<li>接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_questions">获取 不同级别的测试题目</a></li>
</ol>
</li>
</ol>
<h2 id="开始答卷"><a href="#开始答卷" class="headerlink" title="开始答卷"></a>开始答卷</h2><img src="/friend/15-测灵魂-题目.png" alt="15-测灵魂-题目" style="zoom:75%;" />

<h3 id="业务-3"><a href="#业务-3" class="headerlink" title="业务"></a>业务</h3><ol>
<li>将上一个页面的问卷信息 传递到当前页面 (如 标题等)</li>
<li>根据问卷id发送请求 获取问卷题目</li>
<li>点击答案时 收集答案结果</li>
<li>点击最后一道题的答案时 , 将答案数组发送到后台 生成分析结果</li>
<li>将分析结果 传递到下一个页面 - 测灵魂结果页面</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_questionSection__id_">根据题目等级获取问卷试题</a></li>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/post_friends_questionsAns__id_">提交答案</a></li>
</ol>
</li>
</ol>
<h2 id="测试结果"><a href="#测试结果" class="headerlink" title="测试结果"></a>测试结果</h2><img src="/friend/16-测灵魂-结果.png" alt="16-测灵魂-结果" style="zoom:75%;" />



<h3 id="业务-4"><a href="#业务-4" class="headerlink" title="业务"></a>业务</h3><ol>
<li>完成数据渲染</li>
<li>点击 <code>继续测试</code> 重新进行测试</li>
</ol>
<h1 id="用户详情"><a href="#用户详情" class="headerlink" title="用户详情"></a>用户详情</h1><img src="/friend/17-用户详情.png" alt="17-用户详情" style="zoom:75%;" />

<h2 id="业务-5"><a href="#业务-5" class="headerlink" title="业务"></a>业务</h2><ol>
<li><p>获取数据动态渲染</p>
</li>
<li><p>顶部大图轮播</p>
</li>
<li><p>用户动态图片点击放大</p>
</li>
<li><p>滚动分页加载数据</p>
<ol>
<li>对 <code>HeaderImageScrollView</code>绑定 <code>onScroll</code> 事件</li>
<li>事件源中获取 一些距离数据<ol>
<li><code>nativeEvent.contentSize.height</code>  列表内容的高度</li>
<li><code>nativeEvent.layoutMeasurement.height</code> 可视区域的高度</li>
<li><code>nativeEvent.contentOffset.y</code> 滚动条距离顶部的高度 </li>
</ol>
</li>
</ol>
</li>
<li><p>点击 <code>喜欢</code>  通过极光通讯给当前用户发送一条信息</p>
<ol>
<li>建议使用新用户来完成聊天相关的功能操作</li>
<li>需要在<code>tabbar</code>组件中进行极光登录</li>
</ol>
</li>
<li><p>点击 <code>聊一下</code>  跳转到  <code>聊天页面</code></p>
</li>
<li><p>用到的组件</p>
<ol>
<li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-image-zoom-viewer">react-native-image-zoom-viewer</a></li>
<li>teaset的carousel </li>
</ol>
</li>
<li><p>用到的接口</p>
<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_personalInfo__id_">获取朋友详情</a></li>
</ol>
</li>
</ol>
<h1 id="聊天界面"><a href="#聊天界面" class="headerlink" title="聊天界面"></a>聊天界面</h1><img src="/friend/18-聊天面板.png" alt="18-聊天面板" style="zoom: 67%;" />





<h2 id="业务-6"><a href="#业务-6" class="headerlink" title="业务"></a>业务</h2><ol>
<li>显示聊天界面<ol>
<li><a target="_blank" rel="noopener" href="https://github.com/jpush/aurora-imui/blob/master/README_zh.md">aurora-imui-react-native</a></li>
</ol>
</li>
<li>获取极光历史消息</li>
<li>设置发送者和接受者位置显示</li>
<li>发送文字 (配合极光发送文字)</li>
<li>发送图片(配合极光发送图片)</li>
<li>接收消息显示文字和图片</li>
<li>关键api<ol>
<li><code>constructNormalMessage</code> 创建信息体的构造函数</li>
<li><code>getHistoryMessage</code> 获取历史聊天数据</li>
<li><code>onSendText</code> 发送文本消息</li>
<li><code>onSendGalleryFiles</code> 发送图片消息</li>
</ol>
</li>
</ol>
<h1 id="圈子-首页"><a href="#圈子-首页" class="headerlink" title="圈子-首页"></a>圈子-首页</h1><img src="/friend/19-圈子首页.png" alt="19-圈子首页" style="zoom:50%;" />

<h2 id="业务-7"><a href="#业务-7" class="headerlink" title="业务"></a>业务</h2><ol>
<li>使用组件 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-scrollable-tab-view">react-native-scrollable-tab-view</a> 搭建基本结构</li>
<li>创建 <strong>推荐</strong> 和 <strong>最新</strong> 页面</li>
</ol>
<h1 id="圈子-推荐"><a href="#圈子-推荐" class="headerlink" title="圈子-推荐"></a>圈子-推荐</h1><img src="/friend/19-圈子首页-1592471107512.png" alt="19-圈子首页" style="zoom:75%;" />

<h2 id="业务-8"><a href="#业务-8" class="headerlink" title="业务"></a>业务</h2><ol>
<li><p>获取 <code>圈子-推荐</code>数据</p>
</li>
<li><p>使用  <code>FlatList</code> 循环显示内容</p>
<ol>
<li>使用到 <a target="_blank" rel="noopener" href="http://momentjs.cn/">moment.js</a> 日期库 </li>
</ol>
</li>
<li><p>实现  <code>分页加载功能</code></p>
</li>
<li><p>实现  <code>点击图片-放大显示</code> 功能</p>
</li>
<li><p>实现 <code>点赞</code> 功能</p>
<ol>
<li>同时也需要通过极光发送一条 <strong>点赞消息</strong></li>
</ol>
</li>
<li><p>实现 <code>喜欢</code> 功能</p>
</li>
<li><p>实现  <code>不感兴趣</code> 功能</p>
<img src="/friend/image-20200618202006602.png" alt="image-20200618202006602" style="zoom:50%;" />
</li>
<li><p>实现 <code>评论</code> 功能</p>
</li>
<li><p>实现  <code>跳转到发布页面</code> 功能</p>
</li>
<li><p>用到的接口</p>
<ol>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/get_qz_recommend">推荐动态数据</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/get_qz_star__id_">点赞-取消点赞</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/get_qz_like__id_">喜欢-取消喜欢</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/get_qz_noInterest__id_">不感兴趣</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/get_qz_comment__id_">评论列表</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/get_qz_comments_star__id_">评论点赞</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://api-tanhua-web.itheima.net/swagger.html#/qz/commentsSubmit">评论-提交</a></p>
</li>
</ol>
</li>
</ol>
<h1 id="评论列表"><a href="#评论列表" class="headerlink" title="评论列表"></a>评论列表</h1><img src="/friend/image-20200619104316458.png" alt="image-20200619104316458" style="zoom:67%;" />

<h2 id="业务-9"><a href="#业务-9" class="headerlink" title="业务"></a>业务</h2><ol>
<li>获取评论列表数据</li>
<li>渲染页面</li>
<li>实现评论点赞</li>
<li>实现发表评论</li>
<li>滚动分页</li>
<li>点击放大图片</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/qz/get_qz_comment__id_">获取评论列表</a></li>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/qz/get_qz_comments_star__id_">评论-点赞</a></li>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/qz/commentsSubmit">发布评论</a></li>
</ol>
</li>
</ol>
<h1 id="发布动态"><a href="#发布动态" class="headerlink" title="发布动态"></a>发布动态</h1><img src="/friend/image-20200620112709815.png" alt="image-20200620112709815" style="zoom:67%;" />

<h2 id="业务-10"><a href="#业务-10" class="headerlink" title="业务"></a>业务</h2><ol>
<li><p>完成静态页面</p>
</li>
<li><p>实现输入框功能</p>
</li>
<li><p>实现点击获取当前定位功能</p>
</li>
<li><p>实现选取拍照和选取图片功能</p>
<ol>
<li><a target="_blank" rel="noopener" href="https://github.com/react-native-community/react-native-image-picker">react-native-image-picker 图片选择工具</a></li>
</ol>
</li>
<li><p>实现输入表情功能</p>
</li>
<li><p>完成发布和返回上一页功能</p>
</li>
<li><p>用到的接口</p>
<ol>
<li><p><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/qz/trendSubmit">发动态</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/qz/qztrendsimageupload">图片上传</a></p>
<pre><code class="js">headers:&#123;  &#39;Content-type&#39;: &#39;multipart/form-data;charset=utf-8&#39;&#125;

FormData &#123;
    key:&quot;images&quot;,
    value:&#123;
    uri:&quot;file://storage....&quot;
    name:&quot;xxx.png&quot;,
    type:&quot;application/octet-stream&quot;
    &#125;
&#125;</code></pre>
</li>
</ol>
</li>
</ol>
<h3 id="输入表情功能"><a href="#输入表情功能" class="headerlink" title="输入表情功能"></a>输入表情功能</h3><img src="/friend/image-20200620170736848.png" alt="image-20200620170736848" style="zoom: 67%;" />



<h1 id="圈子-最新"><a href="#圈子-最新" class="headerlink" title="圈子-最新"></a>圈子-最新</h1><img src="/friend/20-圈子-最新.png" alt="20-圈子-最新" style="zoom:75%;" />





<h1 id="消息-首页"><a href="#消息-首页" class="headerlink" title="消息-首页"></a>消息-首页</h1><img src="/friend/image-20200624154713022.png" alt="image-20200624154713022" style="zoom:67%;" />



<ol>
<li>实现顶部导航栏结构</li>
<li>实现头部 四个菜单结构</li>
<li>分析头部四个菜单的业务逻辑</li>
<li><a target="_blank" rel="noopener" href="https://github.com/jpush/jmessage-react-plugin/blob/master/document/API.md#getconversations">极光实现获取会话消息</a></li>
<li>点击会话跳转到聊天页面</li>
</ol>
<h1 id="我的-首页"><a href="#我的-首页" class="headerlink" title="我的-首页"></a>我的-首页</h1><img src="/friend/image-20200624184620176.png" alt="image-20200624184620176" style="zoom:67%;" />

<ol>
<li>搭建基本结构</li>
<li>获取 <code>关注 喜欢 粉丝 数量</code></li>
<li>点击链接 跳转到不同的页面</li>
<li>下拉刷新统计数据效果<ol>
<li><a target="_blank" rel="noopener" href="https://reactnative.cn/docs/scrollview#refreshcontrol">scrollview</a></li>
</ol>
</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/my/get_my_counts">互相喜欢，喜欢，粉丝 - 统计</a></li>
</ol>
</li>
</ol>
<h1 id="互相关注-喜欢-粉丝"><a href="#互相关注-喜欢-粉丝" class="headerlink" title="互相关注-喜欢-粉丝"></a>互相关注-喜欢-粉丝</h1><img src="/friend/image-20200626102741697.png" alt="image-20200626102741697" style="zoom:67%;" />

<ol>
<li>使用<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-scrollable-tab-view">react-native-scrollable-tab-view</a>搭建页面结构</li>
<li>发送请求获取数据</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/my/get_my_likelist">关注-喜欢-粉丝</a></li>
<li>搜索框中输入内容进行筛选过滤</li>
<li>点击按钮 实现功能</li>
</ol>
</li>
</ol>
<h1 id="我的动态"><a href="#我的动态" class="headerlink" title="我的动态"></a>我的动态</h1><img src="/friend/image-20200629083851513.png" alt="image-20200629083851513" style="zoom:67%;" />

<h2 id="业务-11"><a href="#业务-11" class="headerlink" title="业务"></a>业务</h2><ol>
<li>发送请求获取数据</li>
<li>渲染页面</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/my/get_my_trends">我的动态</a></li>
</ol>
</li>
</ol>
<h1 id="谁看过我"><a href="#谁看过我" class="headerlink" title="谁看过我"></a>谁看过我</h1><img src="/friend/image-20200629090940114.png" alt="image-20200629090940114" style="zoom:67%;" />

<h2 id="业务-12"><a href="#业务-12" class="headerlink" title="业务"></a>业务</h2><ol>
<li>发送请求获取数据</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/friends/get_friends_visitors">最近来访</a></li>
</ol>
</li>
</ol>
<h1 id="修改个人信息"><a href="#修改个人信息" class="headerlink" title="修改个人信息"></a>修改个人信息</h1><img src="/friend/image-20200629161218326.png" alt="image-20200629161218326" style="zoom:67%;" />

<h2 id="业务-13"><a href="#业务-13" class="headerlink" title="业务"></a>业务</h2><ol>
<li>获取数据动态渲染</li>
<li>修改用户信息</li>
<li>用到的接口<ol>
<li><a target="_blank" rel="noopener" href="http://157.122.54.189:9089/swagger.html#/my/submitUserInfo">修改信息</a></li>
</ol>
</li>
</ol>
<h1 id="通用设置"><a href="#通用设置" class="headerlink" title="通用设置"></a>通用设置</h1><img src="/friend/image-20200629190751501.png" alt="image-20200629190751501" style="zoom:67%;" />

<h2 id="业务-14"><a href="#业务-14" class="headerlink" title="业务"></a>业务</h2><ol>
<li>实现静态布局</li>
<li>实现退出登录功能<ol>
<li>清除缓存</li>
<li>清除mobx中的用户数据</li>
<li>退出极光登录</li>
<li>跳转回登录页面</li>
</ol>
</li>
</ol>
<h1 id=""><a href="#" class="headerlink" title=""></a></h1>
      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>






    




    </div>
    <div class="copyright">
        <p class="footer-entry">
    ©2016-2020 Yelog
</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full" data-title="切换全屏 快捷键 s"><span class="min "></span></button>
<a class="" id="rocket" ></a>

    </div>
</div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.1.0" ></script>

<script src="/js/script.js?v=1.1.0" ></script>
<script>
    var img_resize = 'default';
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $("#post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    

    
</style>







</html>
